<template>
  <div id="app1">
    <!-- 顶部菜单栏 -->
    <div class="navbar">
      <div class="navbar-logo">
        <img src="https://dummyimage.com/40x40/1890ff/fff" alt="Logo">
        <span>网站名称</span>
      </div>
      <ul class="navbar-menu">
        <li><a :class="{ active: currentRoute === 'home' }" @click.prevent="changeRoute('home')">首页</a></li>
        <li><a :class="{ active: currentRoute === 'projects' }" @click.prevent="changeRoute('projects')">项目</a></li>
        <li><a :class="{ active: currentRoute === 'tables' }" @click.prevent="changeRoute('tables')">表</a></li>
        <li><a :class="{ active: currentRoute === 'templates' }" @click.prevent="changeRoute('templates')">模板</a></li>
        <li><a :class="{ active: currentRoute === 'codes' }" @click.prevent="changeRoute('codes')">代码</a></li>
        <li><a :class="{ active: currentRoute === 'public' }" @click.prevent="changeRoute('public')">公开</a></li>
        <li><a :class="{ active: currentRoute === 'switch' }" @click.prevent="changeRoute('switch')">切换</a></li>
      </ul>
      <div class="navbar-user">
        <img src="https://dummyimage.com/40x40/1890ff/fff" alt="User Avatar" @click="toggleDropdown">
        <div class="user-dropdown" :class="{ show: dropdownVisible }">
          <a href="#">修改信息</a>
          <a href="#">退出登录</a>
        </div>
      </div>
    </div>
    <!-- 中部区域 -->
    <div class="main-content">
      
    </div>
    <!-- 底部区域 -->
    <div class="footer">
      <p>友情链接：<a href="#">链接 1</a> <a href="#">链接 2</a> <a href="#">链接 3</a></p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRoute: 'home',
      dropdownVisible: false
    };
  },
  methods: {
    changeRoute(route) {
      this.currentRoute = route;
    },
    toggleDropdown() {
      this.dropdownVisible = !this.dropdownVisible;
    }
  }
};
</script>

<style scoped>
/* 全局样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* 顶部菜单栏样式 */
.navbar {
  position: sticky;
  top: 0;
  background-color: #1890ff;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  z-index: 100;
}

.navbar-logo {
  display: flex;
  align-items: center;
}

.navbar-logo img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.navbar-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-menu li {
  margin: 0 15px;
}

.navbar-menu li a {
  color: white;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 5px;
}

.navbar-menu li a.active {
  background-color: #40a9ff;
}

.navbar-user {
  position: relative;
}

.navbar-user img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}

.user-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 10px;
}

.user-dropdown.show {
  display: block;
}

.user-dropdown a {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 5px 0;
}

/* 中部区域样式 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 底部区域样式 */
.footer {
  background-color: #f0f2f5;
  color: #666;
  text-align: center;
  padding: 10px;
}
</style>
